<script>
import WaterItem from "@/components/water-item.vue";

export default {
  name: "program",
  components: {WaterItem},
  data() {
    return {
      title: '购物车',

      // 水列表
      waterList: [
        {
          'img': 'https://img0.baidu.com/it/u=2123675406,3826392908&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          'title': '农夫山泉矿泉水',
          'oldPrice': 2,
          'price': 1.5,
        }, {
          'img': ' https://img0.baidu.com/it/u=2261860818,1771927031&fm=253&fmt=auto&app=138&f=JPG?w=604&h=500',
          'title': '东方树叶',
          'oldPrice': 6,
          'price': 4.5,
        }, {
          'img': ' https://imgservice.suning.cn/uimg1/b2c/image/a6qXWB3mqm_6-ROwTJRg3A.jpg_800w_800h_4e',
          'title': '茶派',
          'oldPrice': 4,
          'price': 3.7,
        }, {
          'img': 'http://t15.baidu.com/it/u=3470322076,4205422331&fm=224&app=112&f=JPEG?w=500&h=500',
          'title': '苏打水',
          'oldPrice': 4,
          'price': 3.7,
        }, {
          'img': 'https://img2.baidu.com/it/u=4038513052,270543153&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          'title': '哇哈哈矿泉水',
          'oldPrice': 1,
          'price': 0.8,
        }, {
          'img': 'https://img0.baidu.com/it/u=3948084315,1537224532&fm=253&fmt=auto&app=120&f=JPEG?w=350&h=350',
          'title': '可口可乐',
          'oldPrice': 4,
          'price': 3.7,
        }, {
          'img': 'https://img0.baidu.com/it/u=2649260852,1958790947&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          title: '百事可乐',
          'oldPrice': 4,
          'price': 3.4
        },
      ],
    };
  },
  methods: {
    march() {
      alert('hello vue 框架')
    },
    //   getTotalAmount() {
    //     return this.goodsAmount + this.yunFei
    //   }
    //
    // },
    // computed: {
    //   fulName() {
    //     return this.firstName + '=' + this.firstName
    //   },
    //
    //   totalAmount() {
    //     return this.goodsAmount + this.yunFei
    //   }
  },

  computed: {
    totalAmount() {
      const {waterList} = this;

      let amount = 0;
      for (const item of waterList) {
        if (!item.num) item.num = 1;
        amount += item.price * item.num
      }


      return amount;
    }
  }
}
</script>

<template>
  <h1 @click="march">{{ title }}</h1>

  <h1>总价：{{ totalAmount.toFixed(2) }}</h1>

  <water-item v-for="(item, index) in waterList" :key="item"
              :water-name="item.title" :img-url="item.img"
              :old-price="item.oldPrice" :price="item.price"

              :info="item"
  >
    <!--              :info="item"-->

    <template v-slot:top-right v-if="index===0">
      <img
          src="https://img0.baidu.com/it/u=309054097,1007137559&fm=253&fmt=auto&app=138&f=GIF?w=563&h=500">
    </template>
  </water-item>

  <!--  <h1>{{ getTotalAmount() }}</h1>-->
  <!--  <h1>{{ totalAmount }}</h1>-->


  <!--  <h1>{{ fulName }}</h1>-->

</template>

<style scoped>
img {
  width: 35px;
  height: 35px;
  //box-shadow: 0 0 5px gray;
}
</style>